<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores';

const router = useRouter();
const userStore = useUserStore();

// 筛选状态
const selectedFlowerType = ref('全部');
const selectedScene = ref('全部场景');
const selectedPriceRange = ref('全部');
const sortBy = ref('默认排序');

// 鲜花类型
const flowerTypes = ['全部', '玫瑰', '百合', '向日葵', '郁金香', '康乃馨', '满天星', '绿植'];

// 场景分类
const scenes = ['全部场景', '爱情', '生日', '朋友', '感恩', '纪念日', '毕业季', '开业'];

// 价格区间
const priceRanges = ['全部', '¥0-199', '¥200-299', '¥300-499', '¥500-999', '¥1000以上'];

// 排序选项
const sortOptions = [
  { label: '默认排序', value: '默认排序' },
  { label: '价格从低到高', value: '价格从低到高' },
  { label: '价格从高到低', value: '价格从高到低' },
  { label: '销量优先', value: '销量优先' }
];

// 商品数据
const products = [
  {
    id: 1,
    name: '浪漫红玫瑰花束',
    description: '11朵精选昆明玫瑰',
    price: 199,
    image: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 2,
    name: '缤纷混合花束',
    description: '多种鲜花精美搭配',
    price: 259,
    image: 'https://images.unsplash.com/photo-1533616688419-b7a585564566?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 3,
    name: '阳光向日葵花束',
    description: '9朵向日葵主花',
    price: 229,
    image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 4,
    name: '彩色郁金香花束',
    description: '进口郁金香多色搭配',
    price: 289,
    image: 'https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 5,
    name: '纯净白色满天星花束',
    description: '满天星配叶尤加利',
    price: 199,
    image: 'https://images.unsplash.com/photo-1586376259976-6471178d2e08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 6,
    name: '纯洁白百合花束',
    description: '5朵东方百合',
    price: 329,
    image: 'https://images.unsplash.com/photo-1584589167171-541ce45f1eea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 7,
    name: '感恩康乃馨花束',
    description: '12朵粉色康乃馨',
    price: 239,
    image: 'https://images.unsplash.com/photo-1587556930799-8dca6fad6d43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 8,
    name: '蓝色梦幻花束',
    description: '蓝玫瑰绣球花混搭',
    price: 399,
    image: 'https://images.unsplash.com/photo-1591279304658-b894b00c0a87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  }
];

// 筛选方法
const selectFlowerType = (type: string) => {
  selectedFlowerType.value = type;
};

const selectScene = (scene: string) => {
  selectedScene.value = scene;
};

const selectPriceRange = (range: string) => {
  selectedPriceRange.value = range;
};

const selectSort = (sort: string) => {
  sortBy.value = sort;
};

// 组件挂载时初始化
onMounted(() => {
  userStore.initializeAuth();
});

// 导航方法
const goToProductDetail = (product: any) => {
  router.push('/product-detail');
};

// 用户登出
const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};
</script>

<template>
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </a>
        <div class="hidden lg:block w-1/3">
          <div class="relative">
            <input type="text" placeholder="搜索鲜花、场景..." 
              class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
            <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          </div>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a @click.prevent="router.push('/')" href="#" class="text-gray-600 hover:text-rose-500">首页</a>
          <a @click.prevent="router.push('/categories')" href="#" class="text-rose-500 hover:text-rose-600 font-medium">分类</a>
          <a @click.prevent="router.push('/cart')" href="#" class="text-gray-600 hover:text-rose-500">购物车</a>
        </nav>
        <div class="flex items-center space-x-4">
          <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
            <font-awesome-icon icon="shopping-cart" class="text-gray-600 text-xl" />
            <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
          </a>

          <!-- 未登录状态 -->
          <template v-if="!userStore.checkIsLoggedIn">
            <a @click.prevent="router.push('/login')" href="#" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
            <a @click.prevent="router.push('/register')" href="#" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
          </template>

          <!-- 已登录状态 -->
          <template v-else>
            <div class="hidden md:flex items-center space-x-3">
              <div class="flex items-center space-x-2">
                <img
                  :src="userStore.getUserAvatar"
                  :alt="userStore.getDisplayName"
                  class="w-8 h-8 rounded-full object-cover"
                >
                <span class="text-gray-700">{{ userStore.getDisplayName }}</span>
              </div>
              <div class="relative group">
                <button class="text-gray-600 hover:text-rose-500">
                  <font-awesome-icon icon="chevron-down" class="text-sm" />
                </button>
                <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                  <a @click.prevent="router.push('/user-center')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                  <a @click.prevent="router.push('/orders')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的订单</a>
                  <a @click.prevent="router.push('/favorites')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的收藏</a>
                  <div class="border-t border-gray-100"></div>
                  <a @click.prevent="handleLogout" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- 移动端搜索栏 -->
      <div class="mt-3 relative md:hidden">
        <input type="text" placeholder="搜索鲜花、场景..." 
          class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6 md:py-8">
      <!-- 分类筛选区域 -->
      <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div class="border-b border-gray-200 pb-4 mb-4">
          <h3 class="font-medium text-gray-700 mb-2">鲜花类型</h3>
          <div class="flex flex-wrap gap-2">
            <a 
              v-for="type in flowerTypes" 
              :key="type"
              @click.prevent="selectFlowerType(type)"
              href="#" 
              :class="[
                'px-3 py-1 rounded-full text-sm',
                selectedFlowerType === type 
                  ? 'bg-rose-500 text-white' 
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              ]"
            >
              {{ type }}
            </a>
          </div>
        </div>

        <div class="border-b border-gray-200 pb-4 mb-4">
          <h3 class="font-medium text-gray-700 mb-2">场景分类</h3>
          <div class="flex flex-wrap gap-2">
            <a 
              v-for="scene in scenes" 
              :key="scene"
              @click.prevent="selectScene(scene)"
              href="#" 
              :class="[
                'px-3 py-1 rounded-full text-sm',
                selectedScene === scene 
                  ? 'bg-rose-500 text-white' 
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              ]"
            >
              {{ scene }}
            </a>
          </div>
        </div>

        <div>
          <h3 class="font-medium text-gray-700 mb-2">价格区间</h3>
          <div class="flex flex-wrap gap-2">
            <a 
              v-for="range in priceRanges" 
              :key="range"
              @click.prevent="selectPriceRange(range)"
              href="#" 
              :class="[
                'px-3 py-1 rounded-full text-sm',
                selectedPriceRange === range 
                  ? 'bg-rose-500 text-white' 
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              ]"
            >
              {{ range }}
            </a>
          </div>
        </div>
      </div>

      <!-- 排序栏 -->
      <div class="bg-white rounded-lg shadow-sm p-3 flex justify-between items-center mb-6">
        <div class="text-sm text-gray-500">
          共 <span class="text-rose-500">128</span> 个商品
        </div>
        <div class="flex space-x-4 text-sm">
          <a 
            v-for="option in sortOptions" 
            :key="option.value"
            @click.prevent="selectSort(option.value)"
            href="#" 
            :class="[
              sortBy === option.value 
                ? 'text-rose-500' 
                : 'text-gray-500 hover:text-rose-500'
            ]"
          >
            {{ option.label }}
          </a>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
        <a 
          v-for="product in products" 
          :key="product.id"
          @click.prevent="goToProductDetail(product)"
          href="#" 
          class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300"
        >
          <img 
            :src="product.image" 
            :alt="product.name" 
            class="w-full h-40 md:h-48 object-cover"
          >
          <div class="p-3 md:p-4">
            <h3 class="font-medium text-base md:text-lg truncate">{{ product.name }}</h3>
            <p class="text-sm text-gray-500 mb-2">{{ product.description }}</p>
            <p class="text-rose-500 font-bold">¥{{ product.price }}</p>
          </div>
        </a>
      </div>

      <!-- 分页 -->
      <div class="flex justify-center mt-8">
        <div class="flex items-center space-x-1">
          <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">
            <font-awesome-icon icon="angle-left" />
          </a>
          <a href="#" class="px-3 py-1 rounded bg-rose-500 text-white">1</a>
          <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">2</a>
          <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">3</a>
          <span class="px-3 py-1">...</span>
          <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">10</a>
          <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">
            <font-awesome-icon icon="angle-right" />
          </a>
        </div>
      </div>
    </main>

    <!-- 底部导航栏 - 移动端 -->
    <footer class="md:hidden mt-auto bg-white border-t border-gray-200">
      <div class="flex justify-around py-2">
        <a @click.prevent="router.push('/')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="home" class="text-lg" />
          <span class="text-xs mt-1">首页</span>
        </a>
        <a @click.prevent="router.push('/categories')" href="#" class="flex flex-col items-center px-4 py-2 text-rose-500">
          <font-awesome-icon icon="th-large" class="text-lg" />
          <span class="text-xs mt-1">分类</span>
        </a>
        <a @click.prevent="router.push('/cart')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="shopping-cart" class="text-lg" />
          <span class="text-xs mt-1">购物车</span>
        </a>
        <a @click.prevent="router.push('/user-center')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon :icon="['far', 'user']" class="text-lg" />
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </footer>

    <!-- 页脚 - PC端 -->
    <footer class="hidden md:block bg-white pt-8 pb-6 mt-8 border-t border-gray-200">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
          <div>
            <h3 class="font-bold text-gray-800 mb-4">关于我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">品牌故事</a></li>
              <li><a href="#" class="hover:text-rose-500">企业文化</a></li>
              <li><a href="#" class="hover:text-rose-500">门店展示</a></li>
              <li><a href="#" class="hover:text-rose-500">联系我们</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">购物指南</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">购物流程</a></li>
              <li><a href="#" class="hover:text-rose-500">支付方式</a></li>
              <li><a href="#" class="hover:text-rose-500">常见问题</a></li>
              <li><a href="#" class="hover:text-rose-500">售后服务</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">配送服务</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="#" class="hover:text-rose-500">配送范围</a></li>
              <li><a href="#" class="hover:text-rose-500">配送时间</a></li>
              <li><a href="#" class="hover:text-rose-500">配送费用</a></li>
              <li><a href="#" class="hover:text-rose-500">特殊配送服务</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-gray-800 mb-4">联系我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li class="flex items-center">
                <font-awesome-icon icon="phone" class="mr-2 text-rose-500" />
                400-800-8888
              </li>
              <li class="flex items-center">
                <font-awesome-icon icon="envelope" class="mr-2 text-rose-500" />
                service@flowercompany.com
              </li>
              <li class="flex items-center">
                <font-awesome-icon icon="map-marker-alt" class="mr-2 text-rose-500" />
                北京市朝阳区建国路88号
              </li>
            </ul>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon :icon="['fab', 'weixin']" />
              </a>
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon :icon="['fab', 'weibo']" />
              </a>
              <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
                <font-awesome-icon icon="envelope" />
              </a>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-200 pt-6 text-center text-sm text-gray-500">
          <p>© 2023 花礼相伴 版权所有 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
